<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.7.1.js"></script>
    <link rel="stylesheet" href="./css/newsInfo.css">
</head>

<body>
    <div class="nav">
        <div class="left">
            <div class="logo">今日头条</div>
            <div class="list">
                <ul>
                    <li>关注</li>
                    <li>推荐</li>
                    <li>郑州</li>
                    <li>视频</li>
                    <li>财经</li>
                    <li>科技</li>
                    <li>热点</li>
                    <li>国际</li>
                    <li>更多^</li>
                </ul>
            </div>
        </div>
        <div class="right">
            <input type="text" placeholder="666666666">
            <div class="img">
                <img src="./img/搜索.png" alt="" class="search">
            </div>
            <div class="msg">消息</div>
        </div>
    </div>

    <div class="bg">
        <div class="left">
            <div class="title">标题</div>
            <div class="info"><span id="time"> 时间</span>|<span id="Author"> 作者</span></div>
            <div class="context"></div>
            <div class="comment">
                <h5>评论 <span class="num">1</span></h5>
                <div class="commentli">
                    <div class="header">
                        <div class="img"><img src="./img/1.jpeg" alt="">
                        </div>
                    </div>
                    <div class="content"><textarea name="1" id="1" cols="30" rows="10" placeholder="发个评论吧"></textarea>
                    </div>

                </div>
                <div class="commentli">
                    <div class="header">
                        <div class="img"><img src="./img/1.jpeg" alt="">
                        </div>
                        <div class="name">用户名字</div>
                        <div class="like">15 <img src="./img/点赞 (1).png" alt="">
                        </div>
                    </div>
                    <div class="content">用户内容用户内容用户内容用户内容用户内容用户内容用户内容用户内容用户内容用户内容用户内容用户内容</div>
                    <div class="time">时间</div>

                </div>
            </div>
        </div>
        <div class="right">

            <div class="author">
                <div class="authorImg"></div>
                <div class="authorName">大河报</div>
                <div class="authorDetile">大河报官方账号</div>
                <hr>
                <p>TA的热门作品</p>
                <div class="newslist">
                    <div class="news">
                        <div class="othertitle">白宫降板器，sadiaosdoia
                            白宫降板器，sadiaosdoia
                            白宫降板器，sadiaosdoia白宫降板器，sadiaosdoia</div>

                        <div class="underleft">
                            时间

                        </div>
                        <div class="img"><img src="./img/新闻图片.jpg" alt=""></div>
                    </div>
                </div>
                <div class="trending-list">
                    <div class="trending-list-header">
                        <div class="img1"><img src="./img/火.png" alt=""> 头条热榜 </div>
                    </div>
                    <ul>
                        <li><span class="one">1</span> 热榜热榜热榜</li>
                        <li><span class="two">2</span> 热榜热榜热榜</li>
                        <li><span class="three">3</span> 热榜热榜热榜</li>
                        <li><span>4</span> 热榜热榜热榜</li>
                        <li><span>5</span> 热榜热榜热榜</li>
                        <li><span>6</span> 热榜热榜热榜</li>
                        <li><span>7</span> 热榜热榜热榜</li>
                        <li><span>8</span> 热榜热榜热榜</li>
                        <li><span>9</span> 热榜热榜热榜</li>
                        <li><span>10</span> 热榜热榜热榜</li>
                    </ul>
                </div>
                <div class="trending-list fix">
                    <div class="trending-list-header">
                        <div class="img1"><img src="./img/火.png" alt=""> 头条热榜 </div>
                    </div>
                    <ul>
                        <li><span class="one">1</span> 热榜热榜热榜</li>
                        <li><span class="two">2</span> 热榜热榜热榜</li>
                        <li><span class="three">3</span> 热榜热榜热榜</li>
                        <li><span>4</span> 热榜热榜热榜</li>
                        <li><span>5</span> 热榜热榜热榜</li>
                        <li><span>6</span> 热榜热榜热榜</li>
                        <li><span>7</span> 热榜热榜热榜</li>
                        <li><span>8</span> 热榜热榜热榜</li>
                        <li><span>9</span> 热榜热榜热榜</li>
                        <li><span>10</span> 热榜热榜热榜</li>
                    </ul>
                </div>
            </div>

        </div>
        <script>

            // 时间格式化工具函数（保留）
            function formatTimeDiff(time1, time2 = new Date(), showZero = false) {
                const date1 = new Date(time1);
                const date2 = new Date(time2);
                if (isNaN(date1.getTime()) || isNaN(date2.getTime())) {
                    return "无效的时间格式";
                }
                let diffMs = Math.abs(date1.getTime() - date2.getTime());
                const units = [
                    { name: "天", value: 24 * 60 * 60 * 1000 },
                    { name: "小时", value: 60 * 60 * 1000 },
                    { name: "分", value: 60 * 1000 },
                    { name: "秒", value: 1000 },
                ];
                const parts = units.map((unit) => {
                    const count = Math.floor(diffMs / unit.value);
                    diffMs = diffMs % unit.value;
                    return { count, name: unit.name };
                });
                const resultParts = showZero ? parts : parts.filter((part) => part.count > 0);
                return resultParts.length === 0 ? "0秒" : resultParts.map((part) => `${part.count}${part.name}`).join("");
            }

            // 全局参数（统一管理）
            const param = new URLSearchParams(window.location.search);
            const newsId = param.get('newsId');
            const userId = param.get('userId'); // 从URL获取登录用户ID（确保跳转时携带）

            // 1. 加载新闻详情（保留原逻辑，优化错误处理）
            $.ajax({
                url: `http://10.47.164.203:8080/servletdemo/GetNewsInfoServlet?id=${newsId}`,
                method: "GET",
                timeout: 5000,
                dataType: "json" // 直接指定JSON格式，无需手动parse
            }).done(function (response) {
                if (response.code === 200 && response.data) {
                    const news = response.data;
                    $(".title").html(news.newsTitle);
                    $("#time").html(news.publishDate);
                    $("#Author").html(news.newsAuthor);

                    let content = news.newsContent;
                    content = content.replace(/公示图片/g, `<img src="http://10.47.164.204:8080/servletdemo/${news.newsImgs}" class="qr-code" alt="二维码">`);
                    const formattedContent = content.replace(/\r?\n/g, "<br>");
                    $(".context").html(formattedContent);
                } else {
                    alert("新闻加载失败：" + (response.msg || "服务器异常"));
                }
            }).fail(function () {
                alert("新闻加载失败，请刷新页面重试");
            });

            // 2. 滚动事件（保留原逻辑）
            $(window).scroll(() => {
                const scrollTop = $(window).scrollTop();
                if (scrollTop > 500) {
                    $(".nav").show();
                    $(".fix").show();
                    $(".fix").css({ position: "fixed" });
                } else {
                    $(".nav").hide();
                    $(".fix").hide();
                    $(".fix").css({ position: "static" });
                }
            });

            // 3. 加载评论列表（核心修复：同步后端点赞状态）
            $.ajax({
                url: `http://10.47.164.203:8080/servletdemo/GetCommentByNewsIdServlet?newsId=${newsId}&userId=${userId}`,
                // 新增userId参数：后端需要用它判断当前用户是否已点赞该评论
                method: "GET",
                timeout: 5000,
                dataType: "json"
            }).done(function (response) {
                if (response.code === 200 && response.data) {
                    const comments = response.data;
                    // 更新评论总数
                    $(".comment .num").text(comments.length);
                    // 清空原有示例评论（只保留输入框）
                    $(".comment .commentli:not(:first)").remove();
                    // 渲染真实评论
                    comments.forEach(element => {
                        const { commentId, username, commentContent, commentDate, likeNum, isLiked } = element;
                        // isLiked：后端返回的关键字段（true=已点赞，false=未点赞）
                        const date = formatTimeDiff(commentDate);
                        // 点赞图标路径：根据isLiked动态设置
                        const likeImgSrc = isLiked ? "./img/点赞.png" : "./img/点赞 (1).png";
                        // 评论HTML（关键：设置按钮初始value和图片）
                        const commentHtml = `
                        <div class="commentli">
                            <div class="header">
                                <div class="img"><img src="./img/1.jpeg" alt=""></div>
                                <div class="name">${username || "匿名用户"}</div>
                                <!-- 按钮value绑定isLiked，点击事件传递commentId -->
                                <div class="like" onclick="likeComment(this, ${commentId})" value="${isLiked}">
                                    <span>${likeNum}</span>
                                    <img src="${likeImgSrc}" alt="点赞" style="vertical-align: middle; cursor: pointer;">
                                </div>
                            </div>
                            <div class="content">${commentContent}</div>
                            <div class="time">${date}</div>
                        </div>
                    `;
                        $(".comment").append(commentHtml);
                    });
                } else {
                    alert("评论加载失败：" + (response.msg || "服务器异常"));
                }
            }).fail(function () {
                alert("评论加载失败，请刷新页面重试");
            });

            $(".commentli .content").append('<button class="submit-comment">提交评论</button>');
            // 按钮点击提交
            $(".submit-comment").click(submitComment);

            // 提交评论核心函数
            function submitComment() {
                const $textarea = $(".commentli textarea");
                const commentContent = $textarea.val().trim(); // 获取输入内容（去除首尾空格）

                // 1. 校验：未登录拦截
                if (!userId) {
                    alert("请先登录再发表评论！");
                    // 可选：跳转到登录页（根据你的需求调整）
                    // location.href = "./作业表单1.html?redirect=" + encodeURIComponent(window.location.href);
                    return;
                }

                // 2. 校验：空评论拦截
                if (!commentContent) {
                    alert("评论内容不能为空！");
                    $textarea.focus(); // 聚焦到输入框
                    return;
                }

                // 3. 校验：评论长度限制（可选，避免过长评论）
                if (commentContent.length > 500) {
                    alert("评论内容不能超过500字！");
                    return;
                }

                // 4. 禁用提交功能，防止重复提交
                $textarea.attr("disabled", true);
                $(".submit-comment").attr("disabled", true).text("提交中...");

                // 5. 发送 AJAX 请求提交评论
                $.ajax({
                    url: "http://10.47.164.203:8080/servletdemo/AddCommentServlet",
                    method: "POST", // 建议用 POST 提交（比 GET 更安全，支持长内容）
                    timeout: 5000,
                    dataType: "json",
                    contentType: "application/x-www-form-urlencoded;charset=utf-8",
                    data: {
                        newsId: newsId, // 当前新闻ID（必传，关联到具体新闻）
                        userId: userId, // 登录用户ID（必传，记录评论作者）
                        commentContent: commentContent // 评论内容
                    }
                }).done(function (response) {
                    console.log("添加评论响应：", response);
                    if (response.code === 200) {
                        // 提交成功：清空输入框 + 刷新评论列表 + 更新评论数
                        alert("评论发表成功！");
                        $textarea.val(""); // 清空输入框
                        // 重新加载评论列表（直接复用之前的评论加载逻辑，保证数据最新）
                        loadComments();
                    } else {
                        alert("评论发表失败：" + (response.msg || "服务器异常"));
                    }
                }).fail(function (xhr, status, error) {
                    console.error("添加评论失败：", status, error);
                    alert("网络错误，评论发表失败，请重试！");
                }).always(function () {
                    // 恢复提交功能（无论成功/失败都执行）
                    $textarea.attr("disabled", false);
                    $(".submit-comment").attr("disabled", false).text("提交评论");
                });
            }
            // 4. 点赞核心函数（修复接口路径+状态一致性）
            function likeComment(btn, commentId) {
                const $btn = $(btn);
                const $likeNum = $btn.find("span"); // 精准定位点赞数字（避免子元素顺序问题）
                const $likeImg = $btn.find("img");
                const currentLikeNum = parseInt($likeNum.text().trim()) || 0;

                // 校验参数
                if (!userId) {
                    alert("请先登录再点赞！");
                    return;
                }
                if (!commentId || isNaN(commentId)) {
                    alert("评论ID无效！");
                    return;
                }

                // 预存原始状态（回滚用）
                const originalIsLiked = $btn.val() === "true"; // value是字符串，需转布尔
                const originalImgSrc = $likeImg.attr("src");
                const originalLikeNum = currentLikeNum;

                // 禁用按钮防重复点击
                $btn.css("pointer-events", "none");

                // 前端临时更新状态
                let newIsLiked = !originalIsLiked;
                let newLikeNum = newIsLiked ? currentLikeNum + 1 : currentLikeNum - 1;
                let newImgSrc = newIsLiked ? "./img/点赞.png" : "./img/点赞 (1).png";

                $btn.val(newIsLiked);
                $likeImg.attr("src", newImgSrc);
                $likeNum.text(newLikeNum);

                // AJAX请求（关键修复：接口路径改为后端定义的/likeComment）
                $.ajax({
                    url: "http://10.47.164.203:8080/servletdemo/likeComment",
                    method: "POST",
                    timeout: 5000,
                    data: { commentId: commentId, userId: userId },
                    dataType: "json",
                    contentType: "application/x-www-form-urlencoded;charset=utf-8"
                }).done(function (response) {
                    console.log("点赞响应：", response);
                    if (response.code === 200) {
                        // 用后端返回的最新数据覆盖前端临时值（确保一致性）
                        const { newLikeNum, newIsLiked } = response.data;
                        $likeNum.text(newLikeNum);
                        $btn.val(newIsLiked);
                        $likeImg.attr("src", newIsLiked ? "./img/点赞.png" : "./img/点赞 (1).png");
                    } else {
                        // 失败回滚
                        alert("操作失败：" + (response.msg || "服务器异常"));
                        rollbackState();
                    }
                }).fail(function (xhr, status, error) {
                    console.error("点赞失败：", status, error);
                    alert("网络错误，操作失败！");
                    rollbackState();
                }).always(function () {
                    // 恢复按钮点击
                    $btn.css("pointer-events", "auto");
                });

                // 回滚辅助函数
                function rollbackState() {
                    $btn.val(originalIsLiked);
                    $likeImg.attr("src", originalImgSrc);
                    $likeNum.text(originalLikeNum);
                }
            }
            var settings = {
                "url": "http://10.47.164.203:8080/servletdemo/GetTendingServlet",
                "method": "GET",
                "timeout": 0,
            };
            const $fixedTrending = $(".trending-list").find("ul");
            $fixedTrending.empty(); // 清空原有内容

            $.ajax(settings).done(function (response) {

                let data = JSON.parse(response).data
                console.log(data);


                data.forEach((item, index) => {
                    const rank = index + 1;
                    let rankClass = "";
                    if (rank === 1) rankClass = "one";
                    else if (rank === 2) rankClass = "two";
                    else if (rank === 3) rankClass = "three";
                    const liHtml = `
            <li>
                <span class="${rankClass}">${rank}</span>
                <a href="newsInfo.html?newsId=${item.newsId}&userId=${userId}" style="text-decoration: none; color: inherit;">
                    ${item.newsTitle}
                </a>
            </li>
        `;
                    $fixedTrending.append(liHtml)
                });
            });
        </script>
</body>

</html>